<template>
  <div class="department-container">
    <div class="app-container">
      <el-card>
        <!-- 具体页面结构 -->
        <el-tabs>
          <el-tab-pane label="角色管理" />
        </el-tabs>

        <el-row>
          <el-button type="primary" size="small" @click="hAdd">+新增角色</el-button>
        </el-row>
        <!-- 表格 -->
        <el-table :data="list">
          <el-table-column label="序号" type="index" />
          <el-table-column label="角色名称" prop="name" />
          <el-table-column label="描述" prop="description" />
          <el-table-column label="操作">
            <template v-slot="scope">
              <el-button size="small" type="success" @click="hAssign(scope.row.id)">分配权限</el-button>
              <el-button size="small" type="primary" @click="hEdit(scope.row)">编辑</el-button>
              <!-- 找到要删除的那个id -->
              <!--scope理解为变量，并不一定需要固定这个名字，
              el-table-column组件会自动将渲染本行需要的数据传给scope，
              其中scope.row就表示当前行的数据，它对应数据源中的某个对象。这里的row是固定写法 -->
              <el-button size="small" type="danger" @click="hDel(scope.row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>

        <!-- 分页
        @current-change:用户点击页码
        total：总条数
        current-page:显示当前的页码-->
        <el-row>
          <el-pagination
            background
            layout="prev, pager, next"
            :total="total"
            :page-size="pageParams.pagesize"
            :current-page.sync="pageParams.page"
            @current-change="hCurrentChange"
          />
        </el-row>
      </el-card>
    </div>
    <!-- 新增弹框 -->
    <!-- 关闭esc,点击旁边遮罩层关闭弹层的方式 -->
    <!-- 5.2判断编辑添加 -->
    <el-dialog
      :title="isEdit ? '编辑' :'添加'"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :visible.sync="showDialog"
      @close="hClose"
    >
      <!--7.1关闭弹层 @close是弹层关闭的事件 当showDialog从true->false就会执行close -->
      <el-form ref="roleForm" :model="roleForm" label-width="100px">
        <el-form-item label="角色名称" prop="name">
          <el-input v-model="roleForm.name" />
        </el-form-item>
        <el-form-item label="角色描述">
          <el-input v-model="roleForm.description" />
        </el-form-item>
      </el-form>
      <!-- 底部 -->
      <el-row slot="footer" type="flex" justify="center">
        <el-col :span="6">
          <el-button size="small" @click="showDialog=false">取消</el-button>
          <el-button size="small" type="primary" @click="hSubmit">确定</el-button>
        </el-col>
      </el-row>
    </el-dialog>

    <!-- 分配权限 显示选框,默认展开,关掉父子关联-->
    <el-dialog
      title="权限分配"
      :visible.sync="showDialogPerm"
    >
      <AssignPermission
        ref="refPerm"
        :cur-id="curId"
        @close="hhClose"
        @success="hSuccess"
      />
    </el-dialog>
  </div>
</template>
<script>
import AssignPermission from './assignPermission.vue'
import { getRoles, delRole, addRoles, editRole } from '@/api/settings'
export default {
  components: { AssignPermission },
  data() {
    return {
      showDialogPerm: false,
      // 3.1.与接口文档保持一致,数据绑定
      roleForm: {
        name: '',
        description: ''
      },
      // 3.1.2.是否默认关闭弹窗
      showDialog: false,
      // -----------------------------------------------------------------动态设置页面
      // 1.3.改页面
      pageParams: {
        page: 1,
        pagesize: 2
      },
      list: [], // 角色数据
      total: 0, // 总条数
      // 5.1是否编辑
      isEdit: false,
      curId: ''
    }
  },
  created() {
    this.loadRoles()
  },
  methods: {
    hSuccess() {
      // 保存分配权限
      this.showDialogPerm = false
    },
    // 分配权限
    hAssign(id) {
      // 显示弹框
      this.showDialogPerm = true
      // 保存id
      this.curId = id
      // 调用子组件的方法,让它发请求
      this.$nextTick(() => {
        this.$refs.refPerm.loadPermission()
      })
    },
    hhClose() {
      this.showDialogPerm = false
    },
    // ---------------------------------------------------------------------删除
    async doDel(id) {
      // 2.2.调用api的删除请求
      await delRole(id)
      // ---------------------------------------------------------删除时页码要变化
      // 3.0.如果删除是最后一条数据,则页码要-1
      if (this.list.length === 1) { // 每页数组的长度为1
        let page = this.pageParams.page // 页面--
        page--
        page = Math.max(1, page)// 取()里面的最大值,最小值不能小于1
        this.pageParams.page = page
      }
      // 2.3.重发请求
      this.loadRoles()
      // 2.4.提示用户删除成功
      this.$message.success('删除成功')
    },
    hDel(id) {
      // 2.0.请求删除出现弹框提示
      this.$confirm('此操作将删除, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 2.0.1.封装
        this.doDel(id)
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // ----------------------------------------------------------------------页码更新
    // 1.0.用户点击了页码
    hCurrentChange(curPage) {
      // 1.1.更新页码
      this.pageParams.page = curPage
      // 1.2.重发请求
      this.loadRoles()
    },
    // ----------------------------------------------------------------------获取角色
    async loadRoles() {
      // page:请求的页数
      // page-size:每条显示几页
      // 1.2.1.发请求
      const res = await getRoles(this.pageParams)
      console.log(res)
      this.list = res.data.rows // 获取角色管理详情到list
      this.total = res.data.total
    },
    // ----------------------------------------------------------------------添加角色
    hSubmit() {
      // 3.2.0封装
      // this.doAdd()
      // 5.3做添加
      this.isEdit ? this.doEdit() : this.doAdd() // 找不同,是添加还是编辑
    },
    // -------------------------------------------------------------------------找不同的编辑
    async doEdit() {
      // 5.4.发送编辑请求
      await editRole(this.roleForm)
      // 5.5关闭弹窗
      this.showDialog = false
      // 5.6 用户提示
      this.$message.success('编辑成功')
      // 5.7刷新页面
      this.loadRoles()
    },
    async doAdd() {
      // 3.2.发送请求
      await addRoles(this.roleForm)
      // 3.3.关闭弹窗
      this.showDialog = false
      // 3.4.用户提示
      this.$message.success('添加成功')
      // 3.7 让total加1
      this.total++
      // 3.5.刷新页面,这里有问题:因为新增的额数据在最后一页,每次添加显示的都是第一个页面
      // 3.6.解惑:只要每次添加之后就直接查询最后一页的数据 (取整+1)
      this.pageParams.page = Math.ceil(this.total / this.pageParams.pagesize)
      this.loadRoles()
    },
    hAdd() {
      // 5是添加
      this.isEdit = false
      // 用户添加新的角色
      this.showDialog = true
    },
    // -----------------------------------------------------------------------编辑
    hEdit(row) {
      // 5是编辑
      this.isEdit = true
      // 4.1.点击编辑,拿到当前行,给roleForm
      this.roleForm = { ...row }// 浅拷贝把地址给roleForm
      // 当给对象写等号时,要注意bug,这里会在改编辑框时连着页面那行内容一起改变
      // 4.2.显示弹框
      this.showDialog = true
    },
    // --------------------------------------------------------------------------清空表单
    // eslint-disable-next-line no-dupe-keys
    hClose() {
      // 7.2.重置表单
      this.roleForm = { // 表单数据项
        name: '',
        description: ''
      }
      this.$refs.roleForm.resetFields()
    }
  }
}
</script>
